<template>
	<view class="container">
		<view class="info">
			<!-- 微信 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="left">
				<view class="nickname">
					<!-- 管理员 -->
					<text v-if="JSON.stringify(LoginUser) != '{}'">{{LoginUser.nickname}}</text>
					<open-data type="userNickName" v-else></open-data>
				</view>
			</view>
			<view class="right">
				<view class="avatar">
					<u--image v-if="JSON.stringify(LoginUser) != '{}'" :src="LoginUser.avatar" shape="circle"
						width="160rpx" height="160rpx" fit="cover"></u--image>
					<open-data type="userAvatarUrl" v-else></open-data>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || H5 -->
			<view class="left" v-if="JSON.stringify(LoginUser) != '{}'">
				<view class="nickname">
					{{LoginUser.nickname}}
				</view>
				<view class="email">
					{{LoginUser.email?LoginUser.email:'暂无邮箱'}}
				</view>
			</view>
			<view class="left" v-else>
				<view class="nickname">
					未登陆
				</view>
				<view class="email">
					暂无邮箱
				</view>
			</view>
			<view class="right">
				<view class="avatar" v-if="JSON.stringify(LoginUser) != '{}'">
					<u--image :src="LoginUser.avatar" shape="circle" width="160rpx" height="160rpx"
						fit="cover"></u--image>
				</view>
				<view class="avatar" v-else>
					<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="160rpx"
						height="160rpx" fit="cover"></u--image>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="banner-warpper">
			<view class="banner">
				<view class="left" v-if="JSON.stringify(LoginUser) != '{}'">
					<view class="group">
						{{LoginUser.group_text}}
					</view>
					<view class="join">
						加入时间：{{LoginUser.createtime}}
					</view>
				</view>
				<view class="left" v-else>
					<view class="group">
						暂时无角色组
					</view>
					<view class="join">
						无
					</view>
				</view>
				<view class="right">
					<!-- #ifdef MP-WEIXIN -->
					<u-button :customStyle="{width: 180+'px'}" icon="chat" open-type="feedback" shape="circle"
						size="small">问题反馈</u-button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS || H5 -->
					<u-button :customStyle="{width: 180+'px'}" icon="chat" shape="circle" size="small"
						@click="openTypeEvent">问题反馈</u-button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="grid1" v-if="JSON.stringify(LoginUser) != '{}'">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="goPage(listItem.url)">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="30"
						color="#18bc9c"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="actions">
			<view class="contact">
				<!-- #ifdef MP-WEIXIN -->
				<u-button type="primary" icon="account" open-type="contact">联系助手</u-button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || H5 -->
				<u-button type="primary" icon="account" @click="openTypeEvent">联系助手</u-button>
				<!-- #endif -->
			</view>
			<view class="logout">
				<!-- #ifdef MP-WEIXIN -->
				<u-button type="error" icon="reload" v-if="JSON.stringify(LoginUser) != '{}'"
					@click="show = true">注销登录</u-button>
				<u-button type="success" @click="authorization" v-else>授权登录</u-button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || H5 -->
				<u-button type="error" icon="reload" v-if="JSON.stringify(LoginUser) != '{}'"
					@click="show = true">注销登录</u-button>
				<u-button type="success" @click="login" v-else>登录帐号</u-button>
				<!-- #endif -->
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- 确认框 -->
		<u-modal :show="show" :content='content' showCancelButton @cancel="show = false" @confirm="logout"></u-modal>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				list: [{
						name: 'coupon-fill',
						title: '修改资料',
						url: '/pages/admin/profile'
					},
					{
						name: 'chat-fill',
						title: '微信解绑',
						url: '/pages/admin/weichat'
					},
					{
						name: 'person-delete-fill',
						title: '领取记录',
						url: '/pages/manage/receive/index'
					},
					{
						name: 'photo-fill',
						title: '回访记录',
						url: '/pages/manage/visit/index'
					}
				],
				LoginUser: {},
				show: false,
				content: '确认是否退出登陆？'
			}
		},
		onShow() {
			this.LoginUser = uni.getStorageSync('LoginUser') ? uni.getStorageSync('LoginUser') : {}
		},
		methods: {
			// 授权登陆
			authorization() {
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: async (event) => {
						let code = event.code ?? '';
						if (!code) {
							this.$refs.uToast.show({
								message: '授权失败'
							})
							return false;
						}
						let result = await this.$u.api.admin.authorization({
							code: code
						})
						if (result.code == 0) {
							this.$refs.uToast.show({
								message: result.msg,
								type: 'error',
								complete: function() {
									uni.navigateTo({
										url: '/pages/admin/bind'
									});
								}

							})
						} else {
							this.$refs.uToast.show({
								type: 'success',
								message: result.msg
							})
							this.LoginUser = result.data
							uni.setStorageSync('LoginUser', result.data)
						}
					}
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/admin/login'
				});
			},
			openTypeEvent() {
				this.$refs.uToast.show({
					message: '该功能只支持小程序'
				})
			},
			logout() {
				uni.removeStorageSync('LoginUser');
				this.LoginUser = {}
				this.show = false;
				this.$refs.uToast.show({
					type: 'success',
					message: '退出成功',
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				});
			}


		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.container {
		margin: 0;
	}

	.info {
		display: flex;
		padding: 40rpx;
		background-color: #f5f5f5;
	}

	.info .left {
		flex: 3
	}

	.info .right {
		flex: 1
	}

	.info .left .nickname {
		font-size: 26px;
		font-weight: bold;
	}

	.info .left .email {
		font-size: 12px;
		color: gray;
	}

	.banner-warpper {
		background-color: #f5f5f5;
	}

	.banner {
		width: auto;
		margin: 0 40rpx;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		height: 60px;
		background: rgb(34, 52, 70);
		background: linear-gradient(133deg, rgba(34, 52, 70, 1) 35%, rgba(44, 62, 80, 1) 100%);
		box-shadow: 0 10px 10px var(--color-dark);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.banner .left {
		flex: 3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.banner .right {
		flex: 2;
		display: flex;
		justify-content: center;
	}

	.banner .left .group {
		color: #fff;
		font-size: 16px;
		font-weight: bold;
	}

	.banner .left .join {
		color: #aaa;
		font-size: 10px;
		padding-top: 4px;
	}

	.grid1 {
		padding: 20px 40rpx;
		background-color: #fff;
	}

	.grid1 .van-grid-item {
		color: var(--color-primary);
	}

	.grid2 {
		padding: 0 40rpx;
		background-color: #fff;
	}

	.grid2 .title {
		font-size: 16px;
		font-weight: bold;
		padding: 0 10rpx 10px;
	}

	.actions {
		display: flex;
		padding: 20px 40rpx;
	}

	.contact {
		flex: 1;
		padding-right: 4px;
	}

	.logout {
		flex: 1;
		padding-left: 4px;
	}

	.btn-vertical {
		background-color: rgb(0, 0, 0, 0) !important;
		border: 0 !important;
		width: 100%;
		height: 100% !important;
		padding: 15px !important;
	}

	.btn-vertical.van-button--active:before {
		opacity: 1;
		background-color: rgb(0, 0, 0, 0) !important;
	}

	.btn-vertical__icon {
		font-size: 26px;
		align-items: center;
		justify-content: center;
	}

	.btn-vertical__text {
		margin-top: 6px;
		word-wrap: break-word;
		color: var(--grid-item-text-color, #646566);
		font-size: var(--grid-item-text-font-size, 12px);
	}
</style>